<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demo-2</title>
</head>

<body>

  <div id="app">
    Hello !
  </div>

  <script>
    //   处理多个属性：：：


    // 模拟 vue 中的 data 选项
    let data = {
      msg: '你好。',
      count: 10
    }

    // 模拟 vue 的实例
    let vm = {}

    proxyData(data)

    function proxyData(data) {
      // 遍历 data 对象的所有属性
      Object.keys(data).forEach(key => {
        // 数据劫持：当访问或者设置 vm 中的成员的时候，做一些干预操作
        Object.defineProperty(vm, key, {
          // 可枚举（可遍历）
          enumberable: true,
          // 可配置（可以使用 delete 删除，可以通过 defineProperty 重新定义）
          configurable: true,
          // 当获取值的时候执行
          get() {
            console.log('get : ', key, data[key])
            return data[key]
          },
          // 当设置值的时候执行
          set(newVal) {
            console.log('set : ', key, newVal)
            if (newVal === data[key]) {
              return
            }
            data[key] = newVal
            // 数据更改，跟新 DOM 的值
            document.querySelector('#app').textContent = data[key]
          }
        })
      })
    }
    // 测试
    vm.msg = '你好，defineProperty !'
    console.log(vm.msg)

  </script>
</body>

</html>
